<template>
    <div class="message-template">
      <div class="content">
        <div class="notice">
          提示：因微信限制，每个支付订单最多只能发送3条模板消息，所以这里只对接了三个重要的通知。
        </div>
  
        <div class="template-form">
          <el-form :model="templateForm" label-width="140px">
            <el-form-item label="订单受理通知模板id:" required>
              <el-input v-model="templateForm.orderAcceptId" placeholder="请输入模板ID内容"></el-input>
              <div class="tip">在后台处理理解时会发送通知给顾客</div>
            </el-form-item>
  
            <el-form-item label="签证进度通知模板id:" required>
              <el-input v-model="templateForm.visaProgressId" placeholder="请输入模板ID内容"></el-input>
              <div class="tip">在后台处理理解时会发送通知给顾客</div>
            </el-form-item>
  
            <el-form-item label="办理完成通知模板id:" required>
              <el-input v-model="templateForm.completeNoticeId" placeholder="请输入模板ID内容"></el-input>
              <div class="tip">在后台处理理解时会发送通知给顾客</div>
            </el-form-item>
  
            <el-form-item>
              <el-button type="primary" @click="saveTemplates">确定</el-button>
              <el-button @click="resetForm">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'MessageTemplate',
    data() {
      return {
        templateForm: {
          orderAcceptId: '',
          visaProgressId: '',
          completeNoticeId: ''
        }
      }
    },
    methods: {
      saveTemplates() {
        // 验证所有字段都已填写
        if (!this.templateForm.orderAcceptId || 
            !this.templateForm.visaProgressId || 
            !this.templateForm.completeNoticeId) {
          this.$message.error('请填写所有必填项')
          return
        }
        // TODO: 调用API保存模板ID
        this.$message.success('保存成功')
      },
      resetForm() {
        this.templateForm = {
          orderAcceptId: '',
          visaProgressId: '',
          completeNoticeId: ''
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .message-template {
    padding: 24px;
    background: #fff;
    border-radius: 8px;
  }
  
  .notice {
    background: #FEF2F2;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    color: #991B1B;
    font-size: 14px;
  }
  
  .template-form {
    max-width: 800px;
  }
  
  .tip {
    font-size: 12px;
    color: #6B7280;
    margin-top: 4px;
  }
  
  :deep(.el-form-item__label) {
    font-weight: 500;
    color: #374151;
  }
  
  :deep(.el-input) {
    max-width: 400px;
  }
  
  :deep(.el-button--primary) {
    background-color: #8B5CF6;
    border-color: #8B5CF6;
  }
  
  :deep(.el-button--primary:hover) {
    background-color: #7C3AED;
    border-color: #7C3AED;
  }
  </style>